<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<style>
    *{
        padding: 0;
        margin: 0;
        -webkit-tap-highlight-color:transparent;
    }
    body,html{
        width:100%;
        height:100%;
    }
    #demoCanvas{
        width:100%;
        height:100%;
    }
</style>
<link rel="stylesheet" href="./css/loading.css">
<body>
<body>

<div class="loading">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<canvas id="demoCanvas" width="500" height="300"></canvas>
</body>
<script src="./js/axios.js"></script>
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>
<script src="./limit_scroll.js"></script>
<script>
    var contain = document.getElementsByTagName("body")[0];
    var demoCanvas = document.getElementById("demoCanvas");
    limit_scroll(demoCanvas,contain);
    var stage ;
    var current_h= document.body.clientHeight;
    var current_w = document.body.clientWidth;
    var canvas = document.getElementById("demoCanvas");
    var data_list =[{id:1,name:2},{id:1,name:2},{id:1,name:2},{id:1,name:2}];
    var list = [];
    var img;
    var loading = document.getElementsByClassName("loading")[0];

    //get mess
    axios.get('/yizhiweimen/api/user/withTheWindIn/getFloatData')
         .then(function (response) {
            console.log(response);
            loading.style.display="none";
            init();
         })
         .catch(function (error) {
            console.log(error);
         });

    function init() {
        canvas.height = current_h;
        canvas.width = current_w;
        // code here.
        stage = new createjs.Stage("demoCanvas");

        manifest = [
            {src: "logo_2.png", id: "logo_2"}
        ];

        img=new Image();
        img.src="./logo_2.png";

//        img.onload=function () {
//            console.log("img___")
//            conosle.log(img)
//            console.log(img.height);
//            con
//            img.width=10;
//            img.height=10
//        }
        for(var x=0;x<30;x++){
            list.push(init_ff());
            list[x].new_obj.addEventListener("click",function () {
            })
        }
        //toggleCache();

        var c=0;
      var time =  setInterval(function() {
            list[c].move();
            c++;
            if(c>=30) clearInterval(time)
        },1000)
    }


    function toggleCache(value) {
        // iterate all the children except the fpsLabel, and set up the cache:
        var l = stage.numChildren - 1;

        for (var i = 0; i < 30; i++) {
            var shape = stage.getChildAt(i);
            shape.cache(20,20,120,120);
        }
    }

/*****************************************/
//分割线
//原型
/****************************************/
    /**
     * Created by thomas on 2017/11/21.
     */
    function init_ff(){
        var test = new move_ani();
        var  circle_red = new createjs.Shape();//初始化obj 类型
//        circle_red.addEventListener('click', function(e) {
//            console.log(1111111111111111111111111)
//        });
        //设置stage
       // var bitmap = new createjs.Bitmap("/logo_2.png");
        var obj_x = new createjs.Bitmap("/logo_2.png");

        obj_x.scaleX=0.4;
        obj_x.scaleY=0.4;
        test.setStage({
            stage:stage,
            new_obj:obj_x
        });

        test.set_style();//设置样式
        //test.move();
        return test;
    }

    function handleTick() {
        //Circle will move 10 units to the right.
    }

    function _ani(obj){
        createjs.Tween.get(obj.obj, { loop: false })
            .to({y: current_h }, 500, createjs.Ease.getPowInOut(4));
        createjs.Ticker.setFPS(60);
        createjs.Ticker.addEventListener("tick", stage);
    }


    //初始化对象
    function move_ani(){
        this.Stage = null;
        this.new_obj = null;
    }

    //初始化舞台信息
    move_ani.prototype.setStage = function (obj) {
        this.Stage = obj.stage;
        this.new_obj = obj.new_obj;
    }

    //move_ani对象的信息
    move_ani.prototype.data_mess ={
        id:null,
        name:null
    };

    //设置数据
    move_ani.prototype.set_data=function(obj){
        try{
            obj.id&&obj.name;
        }catch(e){
            throw new error("setdata:id or name == null ");
        }
    }

    //初始化样式
    move_ani.prototype.set_style=function(){
       // var data_length = data_list.length;
        var rand_x = Math.round(Math.random()*(current_w));
       // this.new_obj.graphics.beginFill("red").drawCircle(rand_x,-40, 40);//obj的样式

        this.new_obj.x= rand_x;
        this.new_obj.y= -40;
//      this.new_obj.graphics.beginBitmapFill(img);
//      this.new_obj.graphics.drawCircle(400,300,100);

        this.Stage.addChild(this.new_obj);//obj 的颜色
        this.Stage.update();//刷新 显示
    }

    move_ani.prototype.step=function() {
        this.new_obj.y += 2;
        if (this.new_obj.y < current_h) {
            window.requestAnimationFrame(this.step.bind(this));
        }else{
            console.log("else_______________________________")
        }
    }

    //动画效果
    move_ani.prototype.move=function(obj){
        createjs.Tween.get(this.new_obj, { loop: false })
            .to({y: current_h}, 2500, createjs.Ease.line);
        createjs.Ticker.setFPS(60);
        //window.requestAnimationFrame(this.step.bind(this));
        createjs.Ticker.addEventListener("tick",stage);
        createjs.Touch.enable(stage);
        //Will cause the circle to wrap back

    }

    move_ani.prototype.move_test=function () {
        //window.requestAnimationFrame(step);
        var new_obj =  this.new_obj.y;
        var Stage = this.Stage;
        new_obj += 100;
        Stage.update();
//        function step(timestamp) {
//            console.log("xxxxxx")
//            new_obj += 10;
//            //Will cause the circle to wrap back
//            Stage.update();
//            if (new_obj.y < current_h) {
//                window.requestAnimationFrame(step);
//            }
//        }
    }





    //error mess
</script>
</body>
</html>